<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="24">
        <!-- 角色选择提示 -->
        <span>选择角色：</span>
        <el-select v-model="selectedRole" placeholder="角色" @change="handleRoleChange" style="width: 90%;">
          <el-option
              v-for="role in roles"
              :key="role.value"
              :label="role.label"
              :value="role.value">
          </el-option>
        </el-select>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <!-- 角色菜单选择提示 -->
        <span>选择角色菜单：</span>
        <el-cascader
            v-model="selectedMenus"
            :options="menusOptions"
            :props="{ multiple: true, checkStrictly: true, emitPath: false }"
            placeholder="角色菜单"
            style="width: 90%;">
        </el-cascader>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <!-- 确认按钮 -->
        <el-button type="primary" @click="submitUserRole">确认</el-button>
      </el-col>
    </el-row>
  </div>
</template>
<script>

import {selectMenu, selectMenusById, selectRole} from "@/http/home/user/get"
import {updateRoleMenus} from "@/http/home/user/post";

export default {
  data() {
    return {
      // 省略其他数据属性以保持简洁
      selectedRole: null, // 当前选中的角色
      selectedMenus: [], // 选中的菜单
      roles: [], // 所有角色
      menusOptions: [], // 菜单选项
    };
  },
  mounted() {
    this.fetchRoles();
    this.fetchMenus();
  },
  methods: {
    fetchRoles() {
      // 调用API获取所有角色
      selectRole().then(res => {
        this.roles = res.data.data
      })
    },
    fetchMenus() {
      // 调用API获取所有菜单，并格式化为级联选择器需要的格式
      selectMenu().then(res => {
        this.menusOptions = res.data.data
      })
    },
    handleRoleChange(value) {
      // 当选中的角色变化时，更新selectMenuByRoleId为该角色已有的菜单
      this.getRolesMenus(value)
    },
    getRolesMenus(id) {
      selectMenusById(id).then(res => {
        if (res.data.code == 200) {
          this.selectedMenus = res.data.data.map(item => item.menuId)
        }
      })
    },
    submitUserRole() {
      // 构造要发送到后端的数据
      const payload = {
        roleId: this.selectedRole,
        menuIds: this.selectedMenus,
      };

      if (!this.selectedRole || !this.selectedMenus.length) {
        this.$message.error('请确保选择了用户和至少一个角色');
        return; // 提前返回，不执行后续代码
      }

      // 调用API发送数据到后端进行处理
      // 假设API方法名为 updateUserRoles，需要根据你的实际API进行替换
      updateRoleMenus(payload).then(response => {
        if (response.data.code === 200) {
          this.$message.success('角色菜单更新成功');
        } else {
          this.$message.error('角色菜单更新失败');
        }
      }).catch(error => {
        console.error('用户菜单角色出错:', error);
        this.$message.error('用户菜单角色出错');
      });
    },
  },
};
</script>